{include file="common:header" /}
{include file="common:side" /}
<div id="page-wrapper">
  <!-- 人员管理->编辑部门角色 -->
  <!--*************************** content部分开始 ******************-->
  <div class="container-fluid" id="m_main">
    <div class="row m-t-20">
      <div class="col-sm-12">
        <div class="white-box">
          <h3 class="box-title m-b-20">编辑/添加 部门角色</h3>
          <!-- <p class="text-muted m-b-30">Data table example</p> -->
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">部门/角色组名称：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <input type="text" class="form-control" placeholder="" v-model="dataInfo.gr_name" name="gr_name">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">标志：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <input type="text" class="form-control" placeholder="" v-model="dataInfo.nid" name="nid">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">部门：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <select class="selectpicker" data-style="form-control" name="group_id" v-model="dataInfo.group_id" id="group_id">
                    <option value="0">请选择</option>
                    <option v-if="groupList.length>0" v-for="item in groupList" :value="item.id">{{item.gr_name}}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">分类：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <select class="selectpicker" data-style="form-control" name="type" v-model="dataInfo.type" id="type" @change="clearPermit">
                    <option value="1">部门</option>
                    <option value="2">角色</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">备注：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <input type="text" class="form-control" placeholder="" v-model="dataInfo.remark" name="remark">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">排序：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <input type="text" class="form-control" placeholder="" v-model="dataInfo.sort_order" name="sort_order">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ta-c m-t-40 m-b-40">
          <button type="button"class="btn btn-info" @click="sendPermit">确认</button>
        </div>
        <div class="white-box" v-if="dataInfo.type==2">
          <h4>权限</h4>
          <div class="table-responsive">
            <table class="table table-striped color-table info-table">
              <!-- <thead>
                <tr>
                  <th></th>
                  <th></th>
                </tr>
              </thead> -->
              <tbody>
                <tr v-for="(item,index) in permitList">
                  <td>
                    <div class="checkbox checkbox-info checkbox-circle">
                      <input type="checkbox" name="permit" :value="item.id" v-model="checkedList" :id="'item_'+index">
                      <label :for="'item_'+index" class="m-r-10">{{item.mod_name}}</label>
                    </div>
                  </td>
                  <td>
                    <div class="checkbox checkbox-info checkbox-circle di m-r-10" v-for="(permit,i) in item.child">
                      <input type="checkbox" name="permit" :value="permit.id" v-model="checkedList" :id="'permit_'+index+'_'+i" @change="changeFather(permit.id,item.id)">
                      <label :for="'permit_'+index+'_'+i" class="m-r-10">{{permit.mod_name}}</label>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!--*************************** content部分结束 ******************-->

  <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
</div>
{include file="common:js" /}
<script type="text/javascript" src="/web/js/search_list.js"></script>
{include file="common:footer" /}
{include file="component:pagination" /}
<script type="text/javascript">
  var vm1 = new Vue({
    el: '#m_main',
    data() {
      return {
        id: undefined, //当前部门/角色组id
        dataInfo: {id:'',gr_name:'',nid:'',group_id:'',parent_name:'',type:'1',remark:'',sort_order:''},  //部门/角色组信息
        permitList: [{id:1,title:'拼柜合约管理',permits:[{id:1,name:'合约列表'},{id:2,name:'会员列表'}]},{id:2,title:'商品管理',permits:[{id:3,name:'商品列表'},{id:4,name:'下架商品列表'}]}], //权限列表（需清空为空数组）
        checkedList: [], //选中的权限id列表
        groupList:[],//部门下拉列表
      }
    },
    mounted() {
      this.initSelectPicker();
      this.getGroupList();
      this.getDataInfo();
      this.getPermitList();
    },
    methods: {
      // 点击下拉时按最新数据渲染下拉选项
      initSelectPicker(){
        $("#group_id").on('shown.bs.select',function(e){
          $('#group_id').selectpicker('refresh');
        })
      },
      // 获取部门列表
      getGroupList(){
        var that = this;
        axios.post('/dboard/admingr/getPgr',{},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
          if(res.data.Code==0){
            that.groupList = res.data.Data;
          }
        }).catch(err=>{})
      },
      // 获取基础信息
      getDataInfo(){
        var that = this;
        if(window.location.href.lastIndexOf('/id/') >= 0){
          // 为编辑页面
          that.id = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
          // 获取当前编辑的用户信息
          axios.post('/dboard/admingr/infoData',{id:that.id},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
            if(res.data.Code==0){
              that.dataInfo = res.data.Data;
              that.checkedList = that.dataInfo.permits;
              $('#group_id').selectpicker('val',that.dataInfo.group_id);
              $('#type').selectpicker('val',that.dataInfo.type);
            }else{
              alert(res.data.Msg);
            }
          }).catch(err=>{})
        }
      },
      // 获取权限列表
      getPermitList(){
        var that = this;
        axios.post('/dboard/adminmodules/getModulesTree',{},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
          if(res.data.Code==0){
            that.permitList = res.data.Data;
          }else{
            alert(res.data.Msg);
          }
        }).catch(err=>{})
      },
      // 角色切换回部门时，清空选中的权限列表，删除提交信息中的权限信息
      clearPermit(){
        var that = this;
        if(that.dataInfo.type == 1){
          that.checkedList = [];
          if(that.dataInfo.permits){
            delete that.dataInfo.permits;
          }
        }
      },
      // 选中二级权限时，自动选中一级权限
      changeFather(child_id,father_id){
        if(this.checkedList.indexOf(child_id) > -1){
          if(this.checkedList.indexOf(father_id) == -1){
            this.checkedList.push(father_id);
          }
        }
      },
      // 提交部门、角色组信息
      sendPermit(){
        var that = this;
        var dataInfo = that.dataInfo;
        if(dataInfo.type == 2){
          // 为角色，添加选中的角色
          dataInfo.permits = that.checkedList;
        }
        that.groupList.map(item=>{
          if(item.id == dataInfo.group_id){
            dataInfo.parent_name = item.name;
          }
        })
        axios.post('/dboard/admingr/doAeGroup',{dataInfo:dataInfo},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
          if(res.data.Code==0){
            alert('保存成功');
            if(that.id){
              // 编辑则刷新
              window.reload();
            }else{
              // 新增则跳转回列表
              window.location.href = "/dboard/admingr/lists";
              //或res返回新增部门角色id，跳转至该id的编辑页面
              // window.location.href = "/dboard/admin/permissionLists" + res.data.id;
            }
          }else{
            alert(res.data.Msg);
          }
        }).catch(err=>{})
      }
    }
  })
</script>
